<!-- TableView14_03.vue 可展开行的固定表头表格 -->
<template>
  <div class="table-demo">
    <h2>13. 添加表头固定功能,可展开行的固定表头表格</h2>
    <p class="description">使用 expandable 和相关插槽实现行展开功能</p>
    
    <div class="table-container">
      <Table
        :data="customers"
        :columns="columns"
        fixed-header
        fixed-header-height="300px"
        expandable
        :expanded-keys="expandedKeys"
        @expand="handleExpand"
        resizable
        border
        ref="tableRef"
      >
        <!-- 添加展开按钮列 -->
        <template #cell-expand="{ row }">
          <button 
            class="expand-button"
            @click="handleExpand(row)"
            :title="`ID: ${row.id}`"
          >
            {{ expandedKeys.includes(row.id) ? '−' : '+' }}
          </button>
        </template>
        
        <!-- 展开行的内容 -->
        <template #expanded-row="{ row }">
          <div class="expanded-content">
            <h4>{{ row.name }}的详细信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">注册时间：</span>
                <span>{{ row.registerTime }}</span>
              </div>
              <div class="info-item">
                <span class="label">最近登录：</span>
                <span>{{ row.lastLogin }}</span>
              </div>
              <div class="info-item">
                <span class="label">消费总额：</span>
                <span>¥{{ row.totalSpent }}</span>
              </div>
              <div class="info-item">
                <span class="label">订单数：</span>
                <span>{{ row.orderCount }}</span>
              </div>
            </div>
          </div>
        </template>
      </Table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Table from '@/components/Table/Table.vue'

const tableRef = ref(null)

const customers = ref([
  {
    id: 1,
    name: '张三',
    age: 28,
    city: '北京',
    level: '黄金',
    registerTime: '2023-01-15',
    lastLogin: '2024-03-10',
    totalSpent: 15800,
    orderCount: 23
  },
  {
    id: 2,
    name: '李四',
    age: 35,
    city: '上海',
    level: '白银',
    registerTime: '2023-03-20',
    lastLogin: '2024-03-09',
    totalSpent: 8500,
    orderCount: 12
  },
  {
    id: 3,
    name: '王五',
    age: 42,
    city: '广州',
    level: '铂金',
    registerTime: '2022-12-10',
    lastLogin: '2024-03-08',
    totalSpent: 25600,
    orderCount: 45
  }
])

const columns = ref([
  { 
    title: '', 
    dataIndex: 'expand', 
    width: '50px',
    fixed: 'left',
    customCell: true 
  },
  { title: '姓名', dataIndex: 'name', width: '120px' },
  { title: '年龄', dataIndex: 'age', width: '80px' },
  { title: '城市', dataIndex: 'city', width: '120px' },
  { title: '会员等级', dataIndex: 'level', width: '120px' }
])

const expandedKeys = ref([])

const handleExpand = (row) => {
  const index = expandedKeys.value.indexOf(row.id)
  if (index > -1) {
    expandedKeys.value.splice(index, 1)
  } else {
    expandedKeys.value.push(row.id)
  }
  expandedKeys.value = [...expandedKeys.value]
}

// 确保表格组件已经挂载
onMounted(() => {
  // 可以在这里进行一些初始化操作
  console.log('表格组件已挂载:', tableRef.value)
})
</script>

<style scoped>
.table-demo {
  padding: 20px;
}

.description {
  margin: 16px 0;
  color: #666;
}

.table-container {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  position: relative;
  height: 400px;  /* 设置固定高度 */
}

:deep(.table-container) {
  height: 300px;
}

:deep(.body-container) {
  padding-top: 41px;  /* 使用 padding-top 替代 margin-top */
}

:deep(.fixed-header-container) {
  background: white;
  z-index: 10;
}

.expand-button {
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.expand-button:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.expanded-content {
  padding: 16px;
  background-color: #fafafa;
  margin: 0;
  border-top: 1px solid #ebeef5;
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;  /* 确保展开内容有足够的高度 */
}

.expanded-content h4 {
  margin: 0 0 16px;
  color: #303133;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  color: #606266;
  margin-right: 8px;
}

:deep(.expanded-row) {
  background-color: #fafafa;
}

:deep(.expanded-row > td) {
  padding: 0;
  border-bottom: none;
}

/* 添加列宽调整相关样式 */
:deep(.resize-handle) {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 1;
}

:deep(.resize-handle:hover) {
  background-color: #409eff;
  opacity: 0.5;
}

:deep(.resize-line) {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #409eff;
  z-index: 11;
}
</style>
